<template>
	<view class="main">
		<view class="head" @click="toHome">
			<img class="back" src="@/static/tabbar/back.png" alt="back">
			返回
			<view class="head-title">
				订单列表
			</view>
		</view>
		<view class="order-list">
			<scroll-view class="scroll-view" scroll-y="true" >
				<view v-if="orderList.length==0||orderList==undefined||orderList==null">
					<view >
						<img src="@/static/nodata.png" class="empty-image" alt="">
					</view>
					<view class="empty-text">
						这里什么也没有~~~
					</view>
				</view>
				<view v-for="(item,index) in orderList">
					<view class="list-item">
						<view class="item-left">
							<view class="order-id">
								{{item.orderId}}
							</view>
							<view class="">
								{{item.orderInfo}}
							</view>
						</view>
						<view class="item-right">
							<view class="state-image">
								<img :src="item.stateImg">
							</view>
							<view class="state-text">
								{{item.orderState}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				orderList:[{
					orderId:0,
					orderInfo:"我是信息",
					stateImg:'2asd12sad',
					orderState:"未完成"
				},{
					orderId:1,
					orderInfo:"我也是信息",
					stateImg:'',
					orderState:"已完成"
				},{
					orderId:1,
					orderInfo:"我也是信息",
					stateImg:'',
					orderState:"已完成"
				},{
					orderId:1,
					orderInfo:"我也是信息",
					stateImg:'',
					orderState:"已完成"
				},{
					orderId:1,
					orderInfo:"我也是信息",
					stateImg:'',
					orderState:"已完成"
				},{
					orderId:1,
					orderInfo:"我也是信息",
					stateImg:'',
					orderState:"已完成"
				}]
			}
		},
		methods:{
			toHome(){
				// uni.switchTab({
				// 	url: '../tabbar/home/index'
				// })
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	.main {
		padding: 30rpx 50rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		background-color: #f7f7f7;
	}
	.head {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #dddddd;
	}
	.back {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -9rpx;
	}
	.head-title {
		display: inline-block;
		margin-left: 150rpx;
	}
	.order-list {
		
	}
	.scroll-view {
		margin-top: 50rpx;
		height: 1100rpx;
	}
	.empty-image {
		margin: 200rpx 0 30rpx 165rpx;
		width: 300rpx;
	}
	.empty-text {
		color: gray;
		text-align: center;
	}
	.list-item {
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom:20rpx;
	}
	.item-left {
		float: left;
		height: 200rpx;
		border-radius: 20rpx 0 0 20rpx;
		width: 500rpx;
		border-right: 5rpx solid #eaebd9;
	}
	.item-right {
		height: 150rpx;
		width: 100rpx;
		margin-left: 26rpx;
		margin-top: 30rpx;
		/* background-color: aqua; */
		float: left;
	}
	.state-text {
		margin-top: 50rpx;
	}
</style>